<template>
    <el-container>
        <el-main>
            <div id="main" style="width: 1800px;height: 600px;"></div>
        </el-main>
    </el-container>
</template>

<script>
    import echarts from 'echarts'
    export default {
        name: 'PersonCommit',
        methods:{
            drawPie(id){
                this.charts = echarts.init(document.getElementById(id))
                this.charts.setOption({
                    title: {
                        text: '博主投放分类分析（取前五名）'
                    },
                    legend: {},
                    tooltip: {},
                    dataset: {
                        source: [
                            ['product', '小米', '小李', '小王', '小红', '小黑'],
                            ['java', 41.1, 30.4, 65.1, 53.3, 83.8],
                            ['c++', 86.5, 92.1, 85.7, 83.1, 73.4],
                            ['c#', 24.1, 67.2, 79.5, 86.4, 65.2],
                            ['php', 34.1, 57.2, 49.5, 36.4, 45.2],
                            ['python', 55.2, 67.1, 69.2, 72.4, 53.9]
                        ]
                    },
                    series: [{
                        name:"小红",
                        type: 'pie',
                        radius: 60,
                        center: ['25%', '30%'],
                        encode: {
                            itemName: 'product',
                            value: '小红'
                        }
                    }, {
                        name:"小米",
                        type: 'pie',
                        radius: 60,
                        center: ['75%', '30%'],
                        encode: {
                            itemName: 'product',
                            value: '小米'
                        }
                    }, {
                        name:"小李",
                        type: 'pie',
                        radius: 60,
                        center: ['25%', '75%'],
                        encode: {
                            itemName: 'product',
                            value: '小李'
                        }
                    }, {
                        name:"小王",
                        type: 'pie',
                        radius: 60,
                        center: ['75%', '75%'],
                        encode: {
                            itemName: 'product',
                            value: '小王'
                        }
                    }, {
                        name:"小黑",
                        type: 'pie',
                        radius: 60,
                        center: ['50%', '50%'],
                        encode: {
                            itemName: 'product',
                            value: '小黑'
                        }
                    }]
                })
            }
        },
        //调用
        mounted(){
            this.$nextTick(function() {
                this.drawPie('main')
            })
        }
    }
</script>

<style scoped>

</style>